<template>
    <YearSlider :min="minYear" :max="maxYear" v-model:value="year"/>
    <EChartMap :options="options" width="600px" height="600px" map-name="Africa" :geo-json="AfricaGeoJson"/>
</template>
<script setup lang="ts">
import type {EChartsOption} from 'echarts';
import AfricaGeoJson from '@/api/country/BaseData/AfricaGeoJson';
import nameMap from '@/api/country/BaseData/NameMap';
import {getAllCountryData} from '@/api/country';

const minYear = ref();
const maxYear = ref();
const year = ref();
// 初始化年份
const years = getAllCountryData().map(item => item.year);
minYear.value = Math.min(...years);
year.value = minYear.value;
maxYear.value = Math.max(...years);

const options = reactive<EChartsOption>({
    title: {
        text: '通货膨胀大于%2国家地图',
    },
    toolbox: {
        feature: {
            // 是否显示国家名
            myTool1: {
                show: true,
                title: '是否显示国家名称',
                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                onclick: () => {
                    options.geo!['label'].show = !options.geo!['label'].show;
                },
            },
        },
    },
    // geo为地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
    geo: {
        label: {
            show: false,
        },
        zoom: 1.1,
        map: 'Africa', // 使用 registerMap 注册的地图名称。
        nameMap: nameMap,
        itemStyle: {
            areaColor: '#eee',
        },
        // 高亮显示
        regions: [],
    },
});

/**
 * 根据条件过滤出城市数据
 */
function filterData() {
    // 筛选对应年份的数据,再筛选出对应条件的数据
    const selectData = getAllCountryData().filter((item) => item.year === unref(year)).filter((item) => item.inflationAnnualCpi > 2);
    // 组装regions
    const arr: any[] = [];
    selectData.forEach((item) => {
        arr.push({
            name: nameMap[item.country],
            selected: true,
            select: {
                itemStyle: {
                    areaColor: 'red',
                    color: 'green',
                },
            },
        });
    });
    options!.geo!['regions'] = arr;
}

// 初始化
filterData();

// 监听year变化
watch(() => year.value, () => {
    options!.geo!['regions'] = [];
    filterData();
});
</script>
<style scoped lang="scss">

</style>
